<template>
  <BasicModal
    width="800px"
    :title="t('component.upload.preview')"
    class="upload-preview-modal"
    v-bind="$attrs"
    @register="register"
    :showOkBtn="false"
  >
    <FileList :dataSource="fileListRef" :columns="columns" :actionColumn="actionColumn" />
  </BasicModal>
</template>
<script lang="ts">
import { defineComponent, watch, ref } from "vue";
//   import { BasicTable, useTable } from '/@/components/Table';
import FileList from "./FileList.vue";
import { BasicModal, useModalInner } from "/@/components/Modal";
import { previewProps } from "./props";
import { PreviewFileItem } from "./typing";
import { downloadByUrl } from "/@/utils/file/download";
import { createPreviewColumns, createPreviewActionColumn } from "./data";
import { useI18n } from "/@/hooks/web/useI18n";
import { isArray } from "/@/utils/is";

export default defineComponent({
  components: { BasicModal, FileList },
  props: previewProps,
  emits: ["list-change", "register", "delete"],
  setup(props, { emit }) {
    const [register, { closeModal }] = useModalInner();
    const { t } = useI18n();

    const fileListRef = ref<PreviewFileItem[]>([]);
    watch(
      () => props.value,
      (value) => {
        if (!isArray(value)) value = [];
        fileListRef.value = value
          .filter((item) => !!item)
          .map((item) => {
            return {
              uuid: item.uuid,
              url: item.url,
              type: item.name.split(".").pop() || "",
              name: item.name || "",
            };
          });
      },
      { immediate: true }
    );

    // 删除
    function handleRemove(record: PreviewFileItem) {
      const index = fileListRef.value.findIndex((item) => item.uuid === record.uuid);
      if (index !== -1) {
        const removed = fileListRef.value.splice(index, 1);
        emit("delete", removed[0].uuid);
        emit(
          "list-change",
          fileListRef.value.filter((item) => item.uuid !== removed[0].uuid)
        );
      }
    }

    // // 预览
    // function handlePreview(record: PreviewFileItem) {
    //   const { url = '' } = record;
    //   createImgPreview({
    //     imageList: [url],
    //   });
    // }

    // 下载
    function handleDownload(record: PreviewFileItem) {
      const { url = "" } = record;
      downloadByUrl({ url });
    }

    return {
      t,
      register,
      closeModal,
      fileListRef,
      columns: createPreviewColumns() as any[],
      actionColumn: createPreviewActionColumn({ handleRemove, handleDownload }) as any,
    };
  },
});
</script>
<style lang="less">
.upload-preview-modal {
  .ant-upload-list {
    display: none;
  }

  .ant-table-wrapper .ant-spin-nested-loading {
    padding: 0;
  }
}
</style>
